import { ProForm, ProFormText, ProFormSelect, ProFormDatePicker, ProFormDigit } from '@ant-design/pro-components';
import { Col, Row, Space, message, Upload } from 'antd';
import { InboxOutlined } from '@ant-design/icons';
import { addPatients, getPatientsInfo, editPatient } from '@/services/patients'
import type { PatientsItem } from '@/interfaces/patients'
import type { UploadProps } from 'antd';
const { Dragger } = Upload;

const AddForm = ({ readonly = false, onFinish, id }) => {
    return (
        <ProForm<Partial<PatientsItem>>
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 14 }}
            layout='horizontal'
            grid
            submitter={{
                render: (props, doms) => {
                    return readonly ? null : <Row>
                        <Col span={4} offset={20} >
                            <Space>{doms}</Space>
                        </Col>
                    </Row>
                },
            }}
            onFinish={async (values) => {
                // 表单提交
                let result;
                if (id) {
                    // 如果有id就是编辑
                    result = await editPatient(id, values)
                } else {
                    result = await addPatients(values);
                    // 如果没有id就是新增
                }
                if (result.code === 200) {
                    onFinish()
                    message.success('提交成功');
                } else {
                    message.error(result.message);
                }

            }}
            request={async () => {
                if (id) {
                    // 数据请求回显
                    const { code, data } = await getPatientsInfo(id)
                    if (code === 200) {
                        return data
                    } else {
                        message.error('数据请求失败，请重试');
                        return {}
                    }
                } else {
                    return {}
                }

            }}
        >
            <ProFormText
                width="md"
                name="patientnumber"
                label="胸牌号"
                readonly={readonly}
                placeholder="请输入胸牌号"
                colProps={{ span: 12 }}
                tooltip="临时胸牌号请加前缀LS"
                rules={[{ required: true }]}
            />
            <ProFormText
                width="md"
                name="name"
                label="姓名"
                readonly={readonly}
                placeholder="请输入姓名"
                colProps={{ span: 12 }}
                rules={[{ required: true }]}
            />
            <ProFormText colProps={{ span: 12 }}
                label="监区"
                placeholder="请输入监区"
                name="jq"
                readonly={readonly}
                rules={[{ required: true }]}
            />

            <ProFormSelect
                colProps={{ span: 12 }}
                label="性别"
                name="sex"
                readonly={readonly}
                valueEnum={{
                    '男': '男',
                    '女': '女'
                }}
            />

            <ProFormDatePicker
                width="md"
                name="birthday"
                label="出生日期"
                readonly={readonly}
                placeholder="请输入出生日期"
                colProps={{ span: 12 }}
            />
            <ProFormSelect
                colProps={{ span: 12 }}
                label="婚姻状况"
                name="marriage"
                readonly={readonly}
                valueEnum={{
                    '已婚': '已婚',
                    '未婚': '未婚'
                }}
            />
            <ProFormText
                name="nation"
                label="民族"
                readonly={readonly}
                placeholder="请输入民族"
                colProps={{ span: 12 }}
            />
            <ProFormText
                name="address"
                label="户籍地"
                readonly={readonly}
                placeholder="请输入户籍地"
                colProps={{ span: 12 }}
            />
        </ProForm>
    )
}

const FileAdd = ({ onUploadFinish }) => {
    const props: UploadProps = {
        style: {
            margin: '40px 0'
        },
        name: 'file',
        beforeUpload: (file) => {
            const { type } = file;
            if (type !== 'application/vnd.ms-excel' && type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
                message.error('请上传xlsx或xls文件');
                return false
            }
            return true
        },
        showUploadList: false,
        multiple: true,
        action: '/api/patients/import',
        headers: {
            token: sessionStorage.getItem('token') || ''
        },
        onChange(info) {
            const { status } = info.file;
            console.log(status, '==status')
            if (status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (status === 'done') {
                const response = info.file?.response
                if (response?.code === 200) {
                    message.success('文件上传成功');
                    onUploadFinish()
                } else {
                    message.error(response?.message || '')
                }
            } else if (status === 'error') {
                message.error('文件上传异常，请重试');
            }
        }
    };
    return (
        <Dragger {...props}>
            <p className="ant-upload-drag-icon">
                <InboxOutlined />
            </p>
            <p className="ant-upload-text">点击或拖拽文件至此处上传</p>
            <p className="ant-upload-hint">
                仅支持xlsx或xls文件上传
            </p>
        </Dragger>
    )
}
export {
    AddForm,
    FileAdd
} 